<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot-scope="scope" slot="shopName">
        <el-tag v-if="scope.row.shopType===0" type="warning">{{scope.row.shopName}}</el-tag>
        <el-tag v-else-if="scope.row.shopType===1" type="info">{{scope.row.shopName}}</el-tag>
        <el-tag v-else-if="scope.row.shopType===2" type="danger">{{scope.row.shopName}}</el-tag>
        <el-tag v-else-if="scope.row.shopType===3" type="success">{{scope.row.shopName}}</el-tag>
        <el-tag v-else >{{scope.row.shopName}}</el-tag>
      </template>
      <template slot-scope="scope" slot="spuVideo">
       <el-tag v-if="scope.row.spuVideo!==''" @click="videoClick(scope.row.spuVideo)">点击播放视频</el-tag>
        <el-tag v-else type="info">无视频</el-tag>
      </template>

      <template slot="menuLeft">
        <el-tag type="info">历史操作</el-tag>
      </template>
      <template slot-scope="scope" slot="spuDescribeForm">

        <avue-ueditor   v-model="form.spuDescribe"
                       ></avue-ueditor>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   icon="el-icon-document"
                   size="small"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click="handleShowAttr(scope.row.id,scope.row.spuCategory)">商品属性
        </el-button>
        <el-button type="text"
                   icon="el-icon-setting"
                   size="small"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click="handleShowSku(scope.row.id,scope.row.spuCategory)">销售规格
        </el-button>
        <el-button
                   icon="el-icon-check"
                   size="small"

                   type="text"
                   style="margin-left: 10px"
                   @click="handleAudit(scope.row.id,scope.row.auditRemark,2)">通过
        </el-button>
        <el-popover
          placement="top"
          width="260"
          height="180"
          :ref="'remark'+scope.row.$index"
         >
          <p>拒绝理由</p>
          <el-input type="textarea" v-model="scope.row.auditRemark"></el-input>
          <div style="text-align: right; margin-top: 20px">
            <el-button size="mini" type="text" @click=" $refs['remark'+scope.row.$index].doClose()">取消</el-button>
            <el-button type="primary" size="mini"  @click="handleAudit(scope.row.id,scope.row.auditRemark,0,scope.row.$index)">确定</el-button>
          </div>
          <el-button type="text"
                     style="margin-left: 10px"
                            slot="reference"
                            icon="el-icon-close"
                            size="small"

                           >拒绝
          </el-button>
        </el-popover>


      </template>
    </avue-crud>
    <el-dialog title="商品属性配置"
               :visible.sync="attrBox"
               width="60%">

      <avue-crud :data="attrData"
                 :option="attrOption"
                 @current-change="attrCurrentChange"
                 @on-load="attrLoad"
                 :table-loading="attrLoading"
                 ref="attrCrud"
                 @search-change="attrSearchChange"
                 @search-reset="attrSearchReset"
                 @selection-change="attrSelectionChange"
                 :page="attrPage"
                 @size-change="attrSizeChange">
      </avue-crud>
    </el-dialog>
    <el-dialog title="商品规格配置"
               :visible.sync="skuBox"
               width="60%">

      <avue-crud :data="skuData"
                 :option="skuOption"
                 @on-load="skuLoad"
                 :table-loading="skuLoading"
                 ref="skuCrud"
                 @search-change="skuSearchChange"
                 @search-reset="skuSearchReset"
                 @current-change="skuCurrentChange"
                 :page="skuPage"
                 @size-change="skuSizeChange"
      >
        <template slot="menuLeft">


        </template>
      </avue-crud>
    </el-dialog>

    <el-dialog :visible.sync="videoShow" title="查看视频">
      <video autoplay="true" :src="videoShow===true?video:''" style="width: 100%;height: 100%" controls="controls">
      </video>
    </el-dialog>
  </basic-container>
</template>

<script>
  import { getDetail,  update, getPage,audit } from "@/api/product/spu";
  import {getAttrPage ,} from "@/api/product/attrValue";
  import {getSkuPage} from "@/api/product/sku";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {

        video:"",
        attrBox: false,
        skuBox: false,
        videoShow:false,
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          excelBtn:true,
          printBtn:true,
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          index: true,
          viewBtn: true,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          selection: true,
          column: [
            {
              label: "标题",
              prop: "spuTitle",
              search: true,
            },
            {
              label: "副标题",
              prop: "spuInfo",
            },
            {
              label: "所属分类",
              prop: "spuCategory",
              search:true,
              type: "tree",
              dicUrl: "/api/ocm-product/category/list",
              props: {
                label: "categoryName",
                value: "id"
              }
            },
            {
              label: "邮费",
              prop: "spuPostage",
            },
            {
              label: "视频",
              prop: "spuVideo",
              accept:"video/mp4",
              type: "upload",
              listType: 'picture-img',
            },
            {
              label: "主图",
              prop: "spuThumb",
              type: "upload",
              listType: 'picture-img',
            },
            {
              label: "图片",
              hide:true,
              dataType: 'string',
              type: "upload",
              row:true,
              span:24,
              listType: 'picture-card',
              prop: "spuImages",
            },
            {
              label: "详情",
              hide:true,
              formslot:true,
              prop: "spuDescribe",
              dataType: 'string',
              type: "upload",
              row:true,
              span:24,
              listType: 'picture-card'
            },
            {
              label: "商店",
              prop: "shopName",
              search:true,
            },
            {
              label: "商品类型",
              search:true,
              prop: "spuType",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dicUrl: "/api/ocm-system/dict/dictionary?code=product_type",
              type: 'select'
            },
            {
              label: "备注",
              prop: "remark",
              hide:true,
            },
          ]
        },
        /*以下为attr列表所需curd数据*/
        spuId:0,
        attrLoading:true,
        categoryId:0,
        attrQuery:{},
        attrSelectionList: [],
        attrData:[],
        attrPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        attrOption:{
          menu:false,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          tree: true,
          border: true,
          index: true,
          selection: true,
          column: [
            {
              label: "属性名",
              prop: "attrName",
              search: true,
            },
            {
              label: "属性值",
              prop: "attrValue",
              search: true,
            },
          ]
        },
        /*以下为sku列表所需curd数据*/
        skuId:0,
        skuLoading:true,
        skuQuery:{},
        skuSelectionList: [],
        skuData:[],
        skuPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        skuOption:{
          menu:false,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          tree: true,
          border: true,
          index: true,
          selection: true,
          column: [
            {
              label: "标题",
              prop: "skuTitle",
              search: true,
              rules: [{
                required: false,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "价格",
              prop: "skuPrice",
              search: true,
              rules: [{
                required: false,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "规格",
              prop: "saleAttr",
              editDisplay:false,
              search: true,
              rules: [{
                required: false,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "图片",
              prop: "skuImage",
              type: "upload",
              listType: 'picture-img',
            }
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.spu_view, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      videoClick(src){
        this.videoShow=true;
        this.video=src
      },
      handleAudit(id,remark,status,index){
        if(status===0)
        this.$refs['remark'+index].doClose()
        audit(id,remark,status).then(()=>{
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
        });
      },
      attrLoad(attrPage){
        getAttrPage(attrPage.currentPage, attrPage.pageSize,
          Object.assign(this.attrQuery,
            {
              'spuId_equal':this.spuId,
              'skuId_equal':0
            })
        ).then(res => {
          this.attrLoading=true;
          const data = res.data.data;
          this.attrData = data.records;
          this.attrLoading = false;
          this.attrPage.total = data.total;
        });

      },
      skuLoad(){
        getSkuPage(this.skuPage.currentPage, this.skuPage.pageSize,
          Object.assign(this.skuQuery,
            {'k.spuId_equal':this.spuId})
        ).then(res => {
          this.skuLoading=true;
          const data = res.data.data;
          this.skuData = data.records;
          this.skuLoading = false;
          this.skuPage.total = data.total;
        });
      },
      handleShowSku(id,cate){
        this.spuId=id
        this.categoryId=cate
        this.skuLoad()
        this.skuBox = true
      },
      handleShowAttr(id,cate){
        console.log(id)
        this.spuId=id
        this.categoryId=cate
        this.attrLoad(this.attrPage)
        this.attrBox = true
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },

      beforeOpen(done, type) {
        // if (["edit", "view"].includes(type)) {
        //   getDetail(this.form.id).then(res => {
        //     this.form = res.data.data;
        //   });
        // }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.query['s.shopName']=this.query.shopName
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      attrSearchReset() {
        this.attrQuery = {};
        this.attrLoad(this.page);
      },
      attrCurrentChange(currentPage){
        this.attrPage.currentPage = currentPage;
      },
      attrSizeChange(pageSize){
        this.attrPage.pageSize = pageSize;
      },
      attrSearchChange(params, done) {
        this.attrQuery = params;
        this.attrPage.currentPage = 1;
        this.attrLoad(this.attrPage, params);
        done();
      },
      attrSelectionChange(list) {
        this.attrSelectionList = list;
      },
      skuSearchChange(params, done) {
        this.skuQuery = params;
        this.skuLoad();
        done();
      },
      skuSearchReset() {
        this.skuQuery = {};
        this.skuLoad();
      },
      skuCurrentChange(currentPage){
        this.skuPage.currentPage = currentPage;
      },
      skuSizeChange(pageSize){
        this.skuPage.pageSize = pageSize;
      },
      onLoad(page, params={}) {
        this.loading = true;
        getPage(page.currentPage, page.pageSize, Object.assign(params, this.query,{'status':1})).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>
